<template>
    <LoadPage :show="show" />
    <view class="main">
        <view class="title common">{{ detail.details }}</view>
        <view class="common desc" v-if="detail.memo || detail.applyImage">
            <view class="con">{{ detail.memo }}</view>
            <view class="img" v-if="detail.applyImage">
                <image :src="item" v-for="(item, index) in detail.applyImage.split(',')" mode="aspectFill"
                    @click="priview(index)" />
            </view>
        </view>
    </view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';
import { getRequirementDetail } from '@/api/apiList'


let id = ref('')
onLoad((option) => {
    id.value = option.id
    getDetail()
})

// 获取详情
let show = ref(true)
let detail = ref({})
const getDetail = async () => {
    const res = await getRequirementDetail(id.value)
    if (res.code == 200) {
        detail.value = res.data
        show.value = false
    }
}

// 预览图片
const priview = (index) => {
    uni.previewImage({
        urls: detail.value.applyImage.split(','),
        current: index
    })
}
</script>
<style lang="scss" scoped>
.common {
    padding: 30rpx;
    background-color: #fff;
    border-radius: 15rpx;
}

.main {
    padding: 20rpx;

    .desc {
        margin-top: 30rpx;

        .con {
            margin-bottom: 20rpx;
        }

        .img {
            display: flex;
            align-items: center;

            image {
                margin: 10rpx;
                width: 200rpx;
                height: 200rpx;
                border-radius: 15rpx;
            }
        }
    }
}
</style>